<template>
  <div>
    <headerView></headerView>
    <!--上不导航栏结束-->
    <!--中间核心-->
    <div class="product">
      <!--头上表格-->
      <div class="product-table">
        <div class="product-left">
          <table class="table table-bordered">
            <tr class="text-center">
                <td class="title-td">
                <router-link to="/new_product">基本信息</router-link>
              </td>
              <td class="active title-td">
                <router-link to="new_info">项目信息</router-link>
              </td>
              <td class="title-td"><router-link to="new_detail">详细描述</router-link></td>
              <td class="title-td"><router-link to="new_back">回报设置</router-link></td>
            </tr>
          </table>
        </div>
        <div class="product-right">
          <table class="table table-bordered">
            <tr class="text-center">
              <td class="title-td">预览</td>
            </tr>
          </table>
        </div>
      </div>
      <!--下部foem表单-->
      <div class="product-form">
        <!--上标题-->
        <div class="product-title">
          <div class="my-h4">
            <h4>选择你的身份类型</h4>
          </div>
          <div class="btn-save">
            <button class="btn btn-default" @click="saveIdentify()">保存草稿</button>
          </div>
        </div>
        <div class="clear"></div>
        <hr />
        <!--选择机构个人-->
        <div class="choose">
          <table class="table table-bordered">
            <tr class="text-center">
              <td class="choose-td" style="background: #00aced">个人</td>
            </tr>
          </table>
        </div>
        <!--表单-->
        <form>
          <div class="my-form text-center">
            <div class="product-input">
              <input
                class="text"
                type="text"
                placeholder="请输入中文姓名，2-20个字符"
                v-model="formData.username"
                readonly
              />
            </div>
            <div class="product-input">
              <input
                class="text"
                type="text"
                placeholder="二代身份证，请输入数字或字母"
                v-model="formData.idcard"
                readonly
              />
            </div>
            <div class="product-input">
              <input class="text" type="text" placeholder="请输入手机号码" v-model="formData.phone" readonly/>
            </div>

            <div class="product-input">
              <input class="text" type="text" placeholder="客服联系人" v-model="formData.service_name"/>
            </div>
            <div class="product-input">
              <input class="text" type="text" placeholder="客服咨询电话" v-model="formData.service_phone"/>
            </div>
          </div>
          <div class="product-select">
            <div class="product-select1">
              <select class="select1">
                <option>请选择</option>
                <option>河南省</option>
              </select>
            </div>
            <div class="product-select2">
              <select class="select2">
                <option>请选择</option>
                <option>郑州市</option>
                <option>开封市</option>
              </select>
            </div>
          </div>
          <div class="product-select">
            <div class="select-type">
              <select class="select-cla" v-model="selectedOption">
                <option value="" selected>---请选择---</option>
                <option v-for="item in typeList" :key="item.name" :value="item.id">{{item.name}}</option>
              </select>
            </div>
          </div>
        </form>
      </div>
    </div>
    <!--底部开始-->
    <div id="bottom">
<blowView></blowView>
    </div>
  </div>
</template>

<script>
export default {
 data () {
    return {
      typeList:[],// 返回的下拉框类型的数据
      selectedOption: '', // 选中的下拉框
      formData: {
          username: '',
          idcard: '',
          phone: '',
          service_name:'',
          service_phone:'',
          type_id:''
    }
    }
  },
  created(){
    // 项目类型回显
   this.$axios.get('http://localhost:8080/getType').then(response => {
    if(response.data.code===1){
      console.log(response.data.data)
      this.typeList = response.data.data
    }else{
      this.typeList = response.data.msg
    }
   }).catch(error => {
      console.error("未登录，请先登陆！");
    });

    // 发布人姓名、手机号、身份证号 回显
    this.$axios.get('http://localhost:8080/currentUser').then(response => {
    if(response.data.code===1){
      this.formData.username = response.data.data.username
      this.formData.idcard = response.data.data.idcard
      this.formData.phone = response.data.data.phone
    }else{
      this.formData.username = response.data.msg
      this.formData.idcard = response.data.msg
      this.formData.phone = response.data.msg
    }
   }).catch(error => {
      console.error("未登录，请先登录！！");
    })
  },
  methods:{
    saveIdentify(){
      this.formData.type_id=this.typeList[this.selectedOption-1]
      console.log(JSON.stringify(this.formData))
      sessionStorage.setItem("forms1",JSON.stringify(this.formData))
    }
  }
};
</script>

<style scoped>
    @import url('../../public/css/bootstrap.min.css');
    @import url('../../public/css/base.css');
    @import url('../../public/css/headbott.css');
    @import url('../../public/css/index.css');
    @import url('../../public/css/ly-list.css');
    @import url('../../public/css/reg.css');
    @import url('../../public/css/style.css');
</style>